<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#fade_in").click(function(){
			$("#div_red").fadeIn();
			$("#div_green").fadeIn("slow");
			$("#div_blue").fadeIn("3000");
		});
		$("#fade_out").click(function(){
			$("#div_red").fadeOut();
			$("#div_green").fadeOut("slow");
			$("#div_blue").fadeOut("3000");
		});
		$("#fade_toggle").click(function(){
			$("#div_red").fadeToggle();
			$("#div_green").fadeToggle("slow");
			$("#div_blue").fadeToggle("3000");
		});
		var isHalfFade = false;
		$("#fade_to").click(function(){
			if(!isHalfFade){
				$("#div_red").fadeTo("slow",0.15);
				$("#div_green").fadeTo("slow",0.4);
				$("#div_blue").fadeTo("slow",0.7);
				isHalfFade=true;
			}else{
				$("#div_red").fadeTo("slow",1);
				$("#div_green").fadeTo("slow",1);
				$("#div_blue").fadeTo("slow",1);
				isHalfFade=false;
			}
		});
	});
</script>
<title>Fade In and Fade Out</title>
</head>
<body>
<button id="fade_in" type="button">Fade In</button>
<button id="fade_out" type="button">Fade Out</button>
<button id="fade_toggle" type="button">Fade Toggle</button>
<button id="fade_to" type="button">Fade To</button>
<div id="div_red" style="width:80px;height:80px;display:none;background-color:red;"></div>
<div id="div_green" style="width:80px;height:80px;display:none;background-color:green;"></div>
<div id="div_blue" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>